<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
	content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="description"
	content="Metro, a sleek, intuitive, and powerful framework for faster and easier web development for Windows Metro Style.">
<meta name="keywords"
	content="HTML, CSS, JS, JavaScript, framework, metro, front-end, frontend, web development">
<meta name="author"
	content="Sergey Pimenov and Metro UI CSS contributors">

<link rel='shortcut icon' type='image/x-icon' href='favicon.ico' />
<title>基本信息页面</title>
<link href="${pageContext.request.contextPath }/css/metro.css"
	rel="stylesheet">
<link
	href="${pageContext.request.contextPath }/css/metro-responsive.css"
	rel="stylesheet">
<link href="${pageContext.request.contextPath }/css/metro-icons.css"
	rel="stylesheet">
<link href="${pageContext.request.contextPath }/css/metro-schemes.css"
	rel="stylesheet">
<script src="${pageContext.request.contextPath }/js/jquery-2.1.3.min.js"></script>
<script src="${pageContext.request.contextPath }/js/metro.js"></script>
<script src="${pageContext.request.contextPath }/js/select2.min.js"></script>
<style type="text/css">
<!--
.exampl {
	width: 840px;
	height: 550px;
	position: relative;
	margin: 0 0 .625rem 0;
	background-color: #ffffff;
}

.exampl:before,.example:after {
	display: table;
	content: "";
}

.exampl:after {
	clear: both;
}
</style>
<script>
	$(function() {
		$("#datepicker").datepicker();
		$("#datepicker2").datepicker();
		$("#datepicker3").datepicker();
	});
	$(function() {
		$("#select").select2();
	});
	/*   function $(id)
	  {
	      return document.getElementById(id);
	  } */
	//全局变量，记录文件数；
	var fileNum = 1;
	//mouseover时，把input file移到按扭上，保证点击的是file，
	function floatFile() {
		$("file" + fileNum).style.posTop = event.srcElement.offsetTop;
		$("file" + fileNum).style.posLeft = event.x
				- $("file" + fileNum).offsetWidth / 2;
	}
	function PreviewImage(imgFile) {
		var pattern = /(\.*.jpg$)|(\.*.png$)|(\.*.JPG$)|(\.*.jpeg$)|(\.*.gif$)|(\.*.bmp$)/;
		if (!pattern.test(imgFile.value)) {
			alert("系统仅支持jpg/JPG/jpeg/png/gif/bmp格式的照片！");
			imgFile.focus();
		} else {
			var path;
			if (document.all)//IE 
			{
				imgFile.select();
				path = document.selection.createRange().text;
				document.getElementById("imgPreview").innerHTML = "";
				document.getElementById("imgPreview").style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='scale',src=\""
						+ path + "\")";//使用滤镜效果 
			} else//FF 
			{
				path = URL.createObjectURL(imgFile.files[0]);
				document.getElementById("imgPreview").innerHTML = "<img src='"+path+"'/>";
			}
		}
	}
	function init() {
		showValue();
		getJobs();
	} 
	function showValue() {
		var UUserCard;
		if ("${stuff.idcard }" == ""
				|| document.getElementById("idcard").value != "${stuff.idcard }") {
			UUserCard = document.getElementById("idcard").value;
		} else {
			UUserCard = "${stuff.idcard }";
		}
		//获取出生日期
		var birthday = UUserCard.substring(6, 10) + "-"
				+ UUserCard.substring(10, 12) + "-"
				+ UUserCard.substring(12, 14);
		//获取性别 bbs.it-home.org
		if (parseInt(UUserCard.substr(16, 1)) % 2 == 1) {
			document.getElementById("sex").value = "男"; //男
		} else {
			document.getElementById("sex").value = "女";//女
		}
		//获取年龄
		var myDate = new Date();
		var month = myDate.getMonth() + 1;
		var day = myDate.getDate();

		var age = myDate.getFullYear() - UUserCard.substring(6, 10) - 1;
		document.getElementById("birthday").value = birthday;
		if (UUserCard.substring(10, 12) < month
				|| UUserCard.substring(10, 12) == month
				&& UUserCard.substring(12, 14) <= day) {
			age++;
		}
		if (birthday == "--") {
			document.getElementById("age").value = 0;
		} else {
			document.getElementById("age").value = age;
		}
	}
	function getJobs() {
		$.ajax({
			type : 'post',
			url : 'getJobsByIdDepartment.action',
			//请求的是key/value 不需要指定contentType，因为默认就是key/value类型
			//数据格式是key/value的串
			data : 'idDepartment='
					+ document.getElementById('department').value,
			success : function(data) {
				//返回json结果
				var positionElement = document.getElementById("jobs");
				while (positionElement.childNodes.length > 0) {
					var childs = positionElement.childNodes;
					positionElement.removeChild(childs[0]);
				}
				var child = document.createElement("option");

				for ( var i = 0; i < data.length; i++) {
					child = document.createElement("option");
					child.setAttribute("value", data[i].idJob);
					child.innerHTML = data[i].name;
					positionElement.appendChild(child);
				}
			}
		});
	}
</script>

</head>
<body onload="init();">

	<div class="exampl">

		<form id="form1" name="stuffForm"
			action="${pageContext.request.contextPath }/stuff/updateStuffInfo.action"
			method="post" enctype="multipart/form-data">
			<div class="row">
				<div class="cell">
					<div class="accordion large-heading" data-role="accordion"
						data-close-any="true">
						<div class="frame active">
							<div class="heading">基本信息</div>
							<div class="content">
								姓名&nbsp;
								<div class="input-control text" style="width: 150px">
									<input type="text" style="width: 150px" maxlength="8"
										name="name" value="${stuff.name }">
								</div>
								&nbsp; &nbsp; 身份证号
								<div class="input-control text" style="width: 170px">
									<input type="text" id="idcard" maxlength="18" name="idcard"
										value="${stuff.idcard }" onchange="showValue();">
								</div>
								&nbsp; &nbsp;
								<div class="input-control" data-role="select">
									<label> 民族 <select name="nation" size="1" id="nation">
											<c:forEach items="${nations }" var="nation">
												<option value="${nation.idNation }"
													<c:if test="${nation.idNation==stuff.idNation  }">selected="selected" </c:if>>${nation.name
													}</option>
											</c:forEach>
									</select>
									</label>
								</div>
								&nbsp;性别 &nbsp;
								<div class="input-control text" style="width: 40px">
									<input type="text" id="sex" name="sex" style="width: 40px" readonly
										value="${stuff.sex }">
								</div>
								<div id="imgPreview"
									style="width: 120px; height: 160px; float: right;">
									<c:if test="${stuff.imgsrc!=null }">
										<img src="/photo/${stuff.imgsrc }" width="100%" height="100%"
											id="Insert_logo"
											style="background-color: #71b1d1; display: block; width: 120px; height: 160px;" />
									</c:if>
								</div>
								<p></p>
								出生日期&nbsp;&nbsp;
								<div class="input-control text" style="width: 100px">
									<input type="text" name="birthday" id="birthday" style="width: 100px" readonly
										value="${stuff.birthday }">
								</div>
								&nbsp;&nbsp; &nbsp;&nbsp;年龄：&nbsp;
								<div class="input-control text" style="width: 40px">
									<input type="text" id="age" name="age" style="width: 40px" readonly
										value="${stuff.age }">
								</div>
								<div class="input-control" data-role="select">
									<label>&nbsp; &nbsp; &nbsp;婚否 <select name="marry"
										id="marry">
											<option value="否"
												<c:if test="${'否' ==stuff.marry  }">selected="selected" </c:if>>否</option>
											<option value="是"
												<c:if test="${'是' ==stuff.marry  }">selected="selected" </c:if>>是</option>
									</select>
									</label>
								</div>
								&nbsp; &nbsp;工号&nbsp;
								<div class="input-control text" style="width: 70px">
									<input type="text" style="width: 70px" maxlength="7"
										name="stuffnumber" value="${stuff.stuffnumber }">
								</div>
								&nbsp; &nbsp;餐卡号&nbsp;
								<div class="input-control text" style="width: 70px">
									<input type="text" style="width: 70px" maxlength="7"
										name="mealcard" value="${stuff.mealcard }">
								</div>
								<p></p>
								籍贯&nbsp;
								<div class="input-control text" style="width: 250px">
									<input type="text" name="recruitment"
										value="${stuff.recruitment}" />
								</div>
								&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 住址&nbsp;
								<div class="input-control text" style="width: 250px">
									<input type="text" name="address" value="${stuff.address }" />
								</div>
								&nbsp;&nbsp;
								<div id="tt"
									style="position: relative; left: 610px; top: -44px;">
									<button onmouseover="floatFile()"
										class="button loading-pulse lighten primary">上传</button>
									<div id="div1">
										<div id="file1text"></div>
										<input id="file1" name="pic_file" type="file"
											style="position: absolute; left: 0px; top: 0px; height: 40px; width: 80px; opacity: 0"
											onchange='PreviewImage(this)'>
									</div>
								</div>
							</div>
						</div>
						<div class="frame ">
							<div class="heading">文化程度</div>
							<div class="content">
								<div class="input-control" data-role="select">
									<label>文化程度 <select name="idDegress" id="degree">
											<c:forEach items="${degress }" var="degree">
												<option value="${degree.idDegress }"
													<c:if test="${degree.idDegress ==stuff.idDegress  }">selected="selected" </c:if>>${degree.name
													}</option>
											</c:forEach>
									</select>
									</label>
								</div>
								&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 专业 &nbsp;&nbsp;
								<div class="input-control text" style="width: 170px">
									<input type="text" name="profession" id="profession"
										value="${stuff.profession }" />
								</div>
								毕业院校&nbsp;&nbsp;
								<div class="input-control text" style="width: 170px">
									<input type="text" name="school" id="schoolname"
										value="${stuff.school }" />
								</div>
								<p></p>
							</div>
						</div>
						<div class="frame">
							<div class="heading">所在部门</div>
							<div class="content">
								入职时间&nbsp;&nbsp;
								<div class="input-control text" id="datepicker3" <c:if test="${stuff.entertime!=null }"> data-preset="${stuff.entertime }"</c:if> >
									<input type="text" name="entertime">
									<button class="button">
										<span class="mif-calendar"></span>
									</button>
								</div>
								&nbsp;&nbsp;&nbsp;
								<div class="input-control" data-role="select">
									<label>所在部门 <select name="idStuffdepartment"
										id="department" onchange="getJobs()" style="width: 150px">
											<c:forEach items="${departments }" var="department">
												<option value="${department.idStuffdepartment }"
													<c:if test="${department.idStuffdepartment ==stuff.idStuffdepartment  }">selected="selected" </c:if>>${department.name
													}</option>
											</c:forEach>
									</select>
									</label>
								</div>
								&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
								<div class="input-control" data-role="select">
									<label>岗位<select name="idJobs" id="jobs">
											<option value="${stuff.idJobs }">${stuff.jobName }</option>
									</select>
									</label>
								</div>
								&nbsp;&nbsp;&nbsp;&nbsp;
								<div class="input-control" data-role="select">
									<label>职务 <select name="idDuty" id="duty">
											<c:forEach items="${duties }" var="duty">
												<option value="${duty.idDuty }"
													<c:if test="${duty.idDuty ==stuff.idDuty  }">selected="selected" </c:if>>${duty.name
													}</option>
											</c:forEach>
									</select>
									</label>
								</div>
								<p></p>
							</div>
						</div>
						<div class="frame">
							<div class="heading">联系方式</div>
							<div class="content">
								手机号&nbsp;&nbsp;
								<div class="input-control text" style="width: 170px">
									<input name="telphone" type="text" id="telephone" size="18"
										maxlength="18" value="${stuff.telphone }" />
								</div>
								&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; QQ号&nbsp;&nbsp;
								<div class="input-control text" style="width: 170px">
									<input type="text" name="qq" id="qq" value="${stuff.qq }" />
									&nbsp;&nbsp;&nbsp;
								</div>
								email&nbsp;&nbsp;
								<div class="input-control text" style="width: 170px">
									<input type="text" name="email" id="email"
										value="${stuff.email }" />
								</div>
								<p></p>
							</div>
						</div>
					</div>
				</div>
			</div>
			<input type="hidden" name="idStuff" value="${stuff.idStuff }" /> <input
				type="submit" value="保存" />
		</form>
	</div>
	<!-- End example -->

</body>
</html>